<template>
  <div class='container'>
    <el-card >
      <!-- 说明 / 新增试题-->
      <div class="title-explain">
        <span>说明: 目前支持学科和关键字条件筛选</span>
        <el-button type="primary"><i class="el-icon-edit"></i>新增试题</el-button>
      </div>
      <!-- 表单 -->
      <el-form>
        <!-- 第一层 -->
        <el-row :gutter="20">
          <!-- 学科 -->
          <el-col :span="6">
            <el-form-item label="学科" label-width="70px">
              <!-- 这个会报value的错 绑定v-model就好了 -->
              <el-select size="small" placeholder="请选择" class="input-select">
                <el-option
                  label="区域一"
                  value="区域一">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 二级目录 -->
          <el-col :span="6">
            <el-form-item label="二级目录" label-width="70px">
              <!-- 这个会报value的错 绑定v-model就好了 -->
              <el-select size="small" placeholder="请选择" class="input-select">
                <el-option
                  label="区域一"
                  value="区域一">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
            <!-- 标签 -->
          <el-col :span="6">
            <el-form-item label="标签" label-width="70px">
              <!-- 这个会报value的错 绑定v-model就好了 -->
              <el-select size="small" placeholder="请选择" class="input-select">
                <el-option
                  label="区域一"
                  value="区域一">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
            <!-- 关键字 -->
          <el-col :span="6">
            <el-form-item label="关键字" label-width="70px">
              <el-input size="small" placeholder="根据题干搜索"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 分割 -->
        <!-- 第二层 -->
        <el-row :gutter="20">
          <!-- 试题类型 -->
          <el-col :span="6">
            <el-form-item label="试题类型" label-width="70px">
              <!-- 这个会报value的错 绑定v-model就好了 -->
              <el-select size="small" placeholder="请选择" class="input-select">
                <el-option
                  label="区域一"
                  value="区域一">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 难度 -->
          <el-col :span="6">
            <el-form-item label="难度" label-width="70px">
              <!-- 这个会报value的错 绑定v-model就好了 -->
              <el-select size="small" placeholder="请选择" class="input-select">
                <el-option
                  label="区域一"
                  value="区域一">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
            <!-- 方向 -->
          <el-col :span="6">
            <el-form-item label="方向" label-width="70px">
              <!-- 这个会报value的错 绑定v-model就好了 -->
              <el-select size="small" placeholder="请选择" class="input-select">
                <el-option
                  label="区域一"
                  value="区域一">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
            <!-- 录入人 -->
          <el-col :span="6">
            <el-form-item label="录入人" label-width="70px">
              <!-- 这个会报value的错 绑定v-model就好了 -->
              <el-select size="small" placeholder="请选择" class="input-select">
                <el-option
                  label="区域一"
                  value="区域一">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三层 -->
        <el-row :gutter="20">
          <!-- 题目备注 -->
          <el-col :span="6">
            <el-form-item  label="题目备注" label-width="70px">
              <el-input size="small"></el-input>
            </el-form-item>
          </el-col>
          <!-- 企业简称 -->
          <el-col :span="6">
            <el-form-item  label="企业简称" label-width="70px">
              <el-input size="small"></el-input>
            </el-form-item>
          </el-col>
            <!-- 城市 -->
          <el-col :span="6">
            <el-form-item label="城市" label-width="70px" class="input-city ">
              <!-- 这个会报value的错 绑定v-model就好了 -->
              <div class="select-two">
                <el-select placeholder="请选择" class="" style="width: 150px; margin-right: 8px;">
                <el-option
                  size="small"
                  label="区域一"
                  value="区域一">
                </el-option>
              </el-select>
              <!-- 这个会报value的错 绑定v-model就好了 -->
              <el-select placeholder="请选择" class="" style="width: 150px;">
                <el-option
                  size="small"
                  label="区域一"
                  value="区域一">
                </el-option>
              </el-select>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="244px" >
              <el-button size="small">清除</el-button>
              <el-button size="small" type="primary">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 提示 -->
      <el-alert
        title="数据一共 1 条"
        type="info"
        show-icon
        close-text=" ">
      </el-alert>

      <!-- 表格 -->
      <el-table
      style="width: 100%">
      <el-table-column
        label="试题编号"
        width="180">
      </el-table-column>
      <el-table-column
        label="学科"
        width="180">
      </el-table-column>
      <el-table-column
        label="目录">
      </el-table-column>
      <el-table-column
        label="题型">
      </el-table-column>
      <el-table-column
        label="题干">
      </el-table-column>
      <el-table-column
        label="录入时间">
      </el-table-column>
      <el-table-column
        label="难题">
      </el-table-column>
      <el-table-column
        label="录入人">
      </el-table-column>
      <el-table-column
        label="操作">
        <!-- 编辑 -->
        <i class="el-icon-edit"></i>
      </el-table-column>
      </el-table>

    <!-- 分页 -->
    <div class="self-table-pagination">
      <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="prev, pager, next, sizes, jumper"
      :total="400">
    </el-pagination>
    </div>
    </el-card>
  </div>
</template>

<script>
export default {}
</script>

<style scoped lang='less'>
  .container {
    padding: 10px 10px;
    .title-explain {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: pink;
      margin-bottom: 16px;
    }
    .input-select {
      width: 303px;
    }
    .input-city {
      width: 220px;
    }
    .el-form-item--medium {
      margin-bottom: 16px !important;
    }
    .select-two {
      display: flex;
      width: 300px;
    }
  }
  .self-table-pagination {
    margin-top: 20px;
    margin-left: 1060px;
    .pagination-page {
      margin-right: 0!important;
    }
  }
</style>
